<template>
  <!--<div :style="{height:height+'px',zIndex:zIndex}">-->
    <!--<div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">-->
      <!--<slot>-->
        <!--<div>sticky</div>-->
      <!--</slot>-->
    <!--</div>-->
  <!--</div>-->
  <div>
    <div style="display: inline-block">

      <el-button class="playbtn" icon="icon-element-uibofang" v-show="!play" circle  @click="swPlay" ></el-button>
      <el-button class="playbtn" icon="icon-element-uitingzhi" v-show="play" circle  @click="swPlay" ></el-button>
    </div>

    <div style="display: inline-block;width: 90%">
      <c-steps :active="active_f" align-center process-status="success"  finish-status="wait " >
        <c-step  v-for="title in timeLine" :title="title" @changeStep="changeStep"></c-step>
      </c-steps>
    </div>

  </div>

</template>



<script>
  import CSteps from "./src/steps.vue";
  import CStep from "./src/step.vue";

export default {
  name: 'Carousel',
  components: {
    CSteps,
    CStep
  },
  props: {
    active:  {
        type: Number,
        default: 0
      },
    autoplay:  {
        type: Boolean,
        default: false
      },
    timeLine: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      active_f: this.active,
      play: this.autoplay
    }
  },
  mounted() {
    // this.height = this.$el.getBoundingClientRect().height
    // window.addEventListener('scroll', this.handleScroll)
    // window.addEventListener('resize', this.handleReize)
    const self = this;
    setInterval(function () {
      // console.info("paly 》》》》》》》：",self.play,self.active_f);
      if(self.play){
        if(self.timeLine.length -1 > self.active_f){
          self.active_f++;
        }else{
          self.active_f = 0;
        }
      }
    },2000);
  },
  activated() {
    // this.handleScroll()
  },
  destroyed() {
    // window.removeEventListener('scroll', this.handleScroll)
    // window.removeEventListener('resize', this.handleReize)
  },
  methods: {
    changeStep(index){
      this.active_f = index;
    },
    swPlay(){
      this.play = !this.play
    }
   /* sticky() {
      if (this.active) {
        return
      }
      this.position = 'fixed'
      this.active = true
      this.width = this.width + 'px'
      this.isSticky = true
    },
    reset() {
      if (!this.active) {
        return
      }
      this.position = ''
      this.width = 'auto'
      this.active = false
      this.isSticky = false
    },
    handleScroll() {
      this.width = this.$el.getBoundingClientRect().width
      const offsetTop = this.$el.getBoundingClientRect().top
      if (offsetTop < this.stickyTop) {
        this.sticky()
        return
      }
      this.reset()
    },
    handleReize() {
      if (this.isSticky) {
        this.width = this.$el.getBoundingClientRect().width + 'px'
      }
    }*/
  },
  watch:{
    active_f(){
      this.$emit('changeActive', this.active_f);
    },
    active(){
      this.active_f = this.active;
    },
    timeLine(){
      // this.play = false;
    }
  }
}
</script>

<style >
  .playbtn{
    margin-left: 10px!important;
  }

</style>
